<template>
  <div id="detail">
    <!-- 头部 -->
    <div class="top">
      <div class="nav" :style="{ opacity: 1 - opacity }"></div>
      <div class="background"></div>
      <van-image error-icon="" class="blur" :src="baseUrl + list.logo" />
      <div class="content">
        <div class="header">
          <van-sticky offset-top="6">
            <i
              class="iconfont iconicon_more rotate"
              @click="$router.push('/home/compony')"
            ></i>
          </van-sticky>
          <div class="right">
            <i class="iconfont iconbtn_shoucang_sel"></i>
            <i class="iconfont iconbtn_share"></i>
          </div>
        </div>
        <div class="company">
          <div class="name">
            <van-sticky offset-top="8">
              <p>{{ list.name }}</p>
            </van-sticky>
            <div class="desc" :style="{ opacity }">
              <span>{{ list.type }}</span
              ><span>{{ list.step }}</span
              ><span>100-499</span>
            </div>
          </div>
          <van-image
            class="avatar"
            :src="baseUrl + list.logo"
            alt=""
            :style="{ opacity }"
          />
        </div>
        <div class="rest" :style="{ opacity }">
          <i class="iconfont iconicon_gongsi_time"></i>
          <span>{{ list.workTime }}</span>
          <i class="iconfont iconicon_gongsi_sx"></i>
          <span>{{ list.restDay }}</span>
          <i class="iconfont iconicon_gongsi_jiaban"></i>
          <span>{{ list.overtime }}</span>
        </div>
        <div class="welfare" ref="welfare" :style="{ opacity }">
          <ul ref="swipper">
            <li
              class="welfare-item"
              v-for="(item, index) in list.weals"
              :key="index"
            >
              <span class="item">
                <i class="iconfont" :class="item.icon"></i>
                {{ item.text }}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="address">
      <!-- 公司地址 -->
      <van-row type="flex" justify="space-between" class="addres">
        <van-col span="6" class="site"><span>公司地址</span></van-col>
        <van-col span="6" class="sites">
          <span @click="$toast('只有一个地址呢')">全部地址</span>
          <van-icon name="arrow" />
        </van-col>
      </van-row>
      <!-- 公司地址列表 -->
      <van-row type="flex" justify="space-between" class="cityname">
        <van-col span="16"
          ><p>{{ list.region }} {{ list.name }}</p>
          <span>距离当前50m,步行需要57秒</span></van-col
        >
        <van-col span="8"
          ><van-button class="bar" round type="default" @click="navigation"
            ><i class="iconfont iconicon_gongsi_daohang"></i>导航</van-button
          ></van-col
        >
      </van-row>
      <!-- 公司简历 -->
      <van-row type="flex" justify="space-between" class="resume">
        <van-col span="6" class="site"><span>公司简历</span></van-col>
      </van-row>
      <!-- 公司简历列表 -->
      <van-row>
        <van-col span="24"
          ><div class="screening">
            <div class="contEnes" id="conts">
              <span v-html="list.desc"> </span>
            </div>
            <div>
              <span @click="open"> {{ isMore ? '展开更多' : '收起' }}</span
              ><van-icon id="sun" name="arrow-down" />
            </div>
          </div>
        </van-col>
      </van-row>
      <!-- 公司照片 -->
      <van-row type="flex" justify="space-between" class="photos">
        <van-col span="6" class="site"><span>公司照片</span></van-col>
      </van-row>
      <!-- 公司照片列表 -->
      <van-row class="zoom">
        <van-col span="24">
          <van-tabs>
            <van-tab v-for="(item, index) in listData" :key="index">
              <template #title>
                <img
                  ref="bind"
                  v-if="item"
                  class="img"
                  :src="baseUrl + item"
                  alt="预览图片"
                  @click="getImg(listData, index)"
                />
              </template>
            </van-tab>
          </van-tabs>
        </van-col>
      </van-row>
      <!-- 工商信息 -->
      <van-row type="flex" justify="space-between" class="busine">
        <van-col span="6" class="site"><span>工商信息</span></van-col>
      </van-row>
      <!-- 工商信息列表 -->
      <van-row>
        <van-row class="business">
          <van-col span="6"><span class="full">公司全称</span></van-col>
          <van-col span="18">
            <span class="Information">{{ list.fullname }}</span>
          </van-col>
        </van-row>
        <van-row class="business">
          <van-col span="6"><span class="full">成立时间</span></van-col>
          <van-col span="18">
            <span class="Information">{{ list.establishedTime }}</span>
          </van-col>
        </van-row>
        <van-row class="business">
          <van-col span="6"><span class="full">注册资本</span></van-col>
          <van-col span="18">
            <span class="Information">{{ list.capital }}</span>
          </van-col>
        </van-row>
        <van-row class="business">
          <van-col span="6"><span class="full">法人代表</span></van-col>
          <van-col span="18">
            <span class="Information">{{ list.legalPerson }}</span>
          </van-col>
        </van-row>
        <van-row class="business">
          <van-col span="6"><span class="full">信息来源</span></van-col>
          <van-col span="18">
            <span class="Information">{{ list.messageSource }}</span>
          </van-col>
        </van-row>
      </van-row>
      <!-- 面试评价 -->
      <van-row type="flex" justify="space-between" class="comments">
        <van-col span="6" class="site"><span>面试评论</span></van-col>
        <van-col span="6" class="sites">
          <span class="review" @click="show = true">写评论</span>
        </van-col>
        <!-- 模态框 -->
        <van-popup v-model="show">
          <div class="dialog">
            <h3 class="mark">请根据实际情况为企业打分</h3>
            <van-row type="flex" justify="center">
              <van-col span="9" class="wage">
                <van-row class="starlist">
                  <span class="interviewer">岗位描述</span>
                </van-row>
                <van-row class="starlist">
                  <span class="interviewer">面试情况</span>
                </van-row>
                <van-row class="starlist">
                  <span class="interviewer">面试官</span>
                </van-row>
              </van-col>
              <!-- 星 -->
              <van-col span="9" class="satellite alignCenter">
                <van-rate v-if="desc" v-model="desc" />
                <van-rate v-if="situation" v-model="situation" />
                <van-rate v-if="interviewer" v-model="interviewer" />
              </van-col>
            </van-row>
            <div class="job">
              <div class="choice"><span>职位选择</span></div>
              <span class="interview"
                ><span @click="ChooseAn = true">{{
                  chosePost === '' ? '选择面试的岗位' : chosePost
                }}</span></span
              >
            </div>
            <van-row type="flex" justify="center">
              <van-field
                v-model="message"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="请输入留言"
                show-word-limit
              />
            </van-row>
            <div class="orientation">
              <van-button type="default" @click="show = false">取消</van-button>
              <van-button
                plain
                :disabled="message.trim().length === 0 || !chosePost"
                type="default"
                @click="approval"
                >提交</van-button
              >
            </div>
          </div>
        </van-popup>
        <!-- 选择 -->
        <van-action-sheet
          v-model="ChooseAn"
          :round="false"
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-picker
            title="标题"
            show-toolbar
            :columns="columns"
            :visible-item-count="3"
            @confirm="onConfirm"
            @cancel="ChooseAn = false"
          />
        </van-action-sheet>
      </van-row>
      <!-- 面试评价列表 -->
      <van-row type="flex" justify="center" class="commentslist">
        <!-- 评价的分数 -->
        <van-col span="6">
          <div class="comment">
            <div class="commentitem">
              <span class="wd">{{ list.positionScore }}</span
              ><span class="minute">分</span>
              <div class="comme">
                <van-rate
                  v-if="interviewScore"
                  v-model="interviewScore"
                  disabled
                />
              </div>
            </div>
          </div>
        </van-col>
        <!-- 线 -->
        <div class="lint"></div>
        <!-- 面试官 -->
        <van-col span="6" class="wage">
          <van-col class="starlist">
            <span class="interviewer">岗位描述</span>
          </van-col>
          <!-- 2 -->
          <van-col class="starlist">
            <span class="interviewer">面试情况</span>
          </van-col>
          <!-- 3 -->
          <van-col class="starlist">
            <span class="interviewer">面试官</span>
          </van-col>
        </van-col>
        <!-- 星 -->
        <van-col span="6" class="satellite">
          <van-row>
            <van-rate v-if="interviewScore" v-model="interviewScore" disabled
          /></van-row>
          <van-row>
            <van-rate v-if="positionScore" v-model="positionScore" disabled
          /></van-row>
          <van-row>
            <van-rate
              v-if="interviewerScore"
              v-model="interviewerScore"
              disabled
          /></van-row>
        </van-col>
      </van-row>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 用户评论模块 -->
        <van-row class="user" v-for="(item, index) in totaes" :key="index">
          <!-- 用户头像 -->
          <van-col span="3">
            <van-image
              round
              width="1rem"
              height="1rem"
              :src="baseUrl + item.user.avatar"
            />
          </van-col>
          <!-- 用户名字 -->
          <van-col span="19" class="userName">
            <h5 class="usernames">{{ item.user.nickname }}</h5>
            <p class="engineer">面试岗位:{{ item.position }}</p>
            <span class="caption" v-if="item.tags">{{ item.tags[0] }}</span
            >&nbsp;&nbsp;&nbsp;
            <span class="caption" v-if="item.tags">{{ item.tags[1] }}</span>
            <div class="details">
              <span>{{ item.content }}</span>
            </div>
            <p class="when">{{ item.created_at | dateStyleOne }}</p>
            <div class="asteroid">
              <van-rate
                v-if="item.positionScore"
                v-model="item.positionScore"
                readonly
              />
            </div>
          </van-col>
        </van-row>
      </van-list>
    </div>
    <!-- 底部 -->
    <div class="terminalblock">
      <van-row ype="flex" justify="center" class="line">
        <van-col span="8">
          <van-button @click="stages" class="positi" type="default"
            >在招职位
          </van-button></van-col
        >
        <van-col span="6">
          <van-button @click="stage" class="questions" type="default"
            >企业面试题</van-button
          ></van-col
        >
        <div class="positis">
          <span>{{ list.positions }}</span>
        </div>
        <div class="question">
          <span>{{ list.questions }}</span>
        </div>
      </van-row>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { ImagePreview, Lazyload, Toast, Sticky, List } from 'vant'
// 调用接口 获取当前的文章详情
import {
  companyDetail,
  companyComments,
  companyPositions,
  addComment
} from '@/api/company/company.js'
import Vue from 'vue'
Vue.use(List)
Vue.use(Sticky)
Vue.use(Lazyload)
export default {
  created () {
    // 调用获取文章详情:接口
    this.Detail()
    this.Comments()
    // this.Comments()
    // 获取职位
    this.Detailed()
  },
  name: 'ImagePreview',
  data () {
    return {
      chosePost: '',
      opacity: 1,
      value: 2.5,
      listData: [], // 图片数组
      show: false,
      // 选择
      ChooseAn: false,
      //
      message: '',
      // 按钮的禁用
      disabled: true,
      id: this.$route.query.id,
      list: {},
      totaes: [],
      // 定义基地址来存储当前用户的头像
      baseUrl: process.env.VUE_APP_URL,
      // 面试官的评分
      interviewerScore: '',
      positionScore: '',
      interviewScore: '',
      interviewerScor: 5,
      interviewScores: 5,
      interviewSco: 5,
      desc: 5,
      situation: 5,
      interviewer: 5,
      loading: false,
      finished: false,
      // 向服务器请求的数量
      limit: 10,
      // 当前的页面数
      total: '',
      // 当前文章的id
      ids: '',
      start: 0,
      limite: 100,
      content: '',
      // 显示的职位文本信息
      position: '',
      // 提交的职位信息
      columns: [],
      isMore: true
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  computed: {
    getCurrentID () {
      return this.columns.filter(item => {
        return item.text === this.chosePost
      })[0].id
    }
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top < 245) {
        // console.log(top)
        this.opacity = (245 - top) / 245
      } else {
        this.opacity = 0
      }
    },
    personScroll (index) {
      // 默认有六个li子元素，每个子元素的宽度为120px
      const width = index * 130
      this.$refs.swipper.style.width = width + 'px'
      // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new Bscroll(this.$refs.welfare, {
            startX: 0,
            click: true,
            scrollX: true,
            // 忽略竖直方向的滚动
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      })
    },
    async Detailed () {
      var res = await companyPositions({
        id: this.id,
        limit: this.limite
      })
      console.log(res.data.list)
      this.columns = res.data.list.map(item => {
        return { text: item.name, id: item.id }
      })
      // console.log('Detailed', this.columns)
    },
    // 打开更多
    open () {
      this.isMore = !this.isMore
      var sum = document.querySelector('.van-icon-arrow-down')
      var arr = document.querySelector('#conts')
      if (arr.className.indexOf('active') !== -1) {
        arr.className = 'contEnes'
        sum.className += 'van-icon-arrow-down::after'
      } else {
        arr.className = 'active'
        sum.className += ' rotate-up'
      }
    },
    getImg (images, index) {
      var arr = images.map(item => this.baseUrl + item)
      ImagePreview({
        images: arr,
        showIndex: true,
        loop: false,
        startPosition: index
      })
    },
    // 当前用户点击导航按钮就 --提示用户--该模块没有开发
    navigation () {
      Toast('该模块没有开发')
    },
    // 获取当前的文章详情
    async Detail () {
      var res = await companyDetail(this.id)
      this.list = res.data
      this.listData = res.data.sliders
      this.ids = res.data.id
      // 面试官的评分
      this.interviewerScore = res.data.interviewerScore
      // 位置评分
      this.positionScore = res.data.positionScore
      this.interviewScore = res.data.interviewScore
      this.$nextTick(() => {
        this.personScroll(res.data.weals.length)
      })
      // console.log(this.list.id)
      // console.log('我是id', this.ids)
    },
    //
    // 获取当前评论用户信息
    async Comments () {
      var res = await companyComments({
        id: this.id,
        limit: this.limit,
        start: this.start
      })
      this.totaes = res.data.list
      this.positionScores = res.data.list.positionScores
      // 当前文章的页面数
      this.total = res.data.total
      // console.log('获取评论详情 总页', res.data.total)
    },
    // 向下滚动刷新
    async onLoad () {
      // 异步更新数据
      var res = await companyComments({
        id: this.id,
        start: this.start,
        limit: this.limit,
        total: this.total
      })
      // 当前文章的页面数
      this.total = res.data.total
      // 将服务器当前的数据拼接在当前的数据上
      this.totaes = [...this.totaes, ...res.data.list]
      this.start += this.limit
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (res.data.list.length === 0) {
        this.finished = true
      }
    },
    // (模态框)评论面试官的分  提交按钮
    onConfirm (val) {
      this.chosePost = val.text
      this.ChooseAn = false
    },
    async approval () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 20000
      })
      const res = await addComment({
        positionScore: this.desc,
        interviewScore: this.situation,
        interviewerScore: this.interviewer,
        position: this.getCurrentID,
        tags: ['面试官很nice', '面试效率高'],
        content: this.message
      })
      // console.log(res)
      Toast.success('发表成功')
      this.show = false
      this.totaes.unshift(res.data)
    },
    mapActions () {
      // for (var key in this.columns) {
      //   this.columns[key]
      // }
      // console.log('name', this.columns[key])
      // var sex = [{ name: 1 }, { name: 3 }, { name: 4 }, { name: 5 }]
      // var res = Object.values(sex)
      // console.log(res)
    },
    // 点击 选中性别
    onChange (alue, index) {
      console.log(alue, index)
      this.show = false
    },
    stages (ids) {
      this.$router.push(`/recruitment/?id=${this.ids}`)
    },
    stage (ids) {
      this.$router.push(`/questions/?id=${this.ids}`)
    }
  }
}
</script>

<style lang="less" scoped>
#detail {
  margin-bottom: 60px;
  .top {
    height: 245px;
    overflow: hidden;
    position: relative;
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      height: 46px;
      width: 100%;
      opacity: 0;
      z-index: 2;
      background-color: #ca0131;
    }

    .content {
      position: absolute;
      padding: 15px;
      width: 100%;
      height: 100%;
      z-index: 4;
      // background-color: rgba(0, 0, 0, 0.1);
      // background-color: #181a39;
      top: 0;
      left: 0;
      .header {
        height: 44px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        /deep/ .van-sticky--fixed {
          left: 15px;
        }
        i {
          font-size: 25px;
          color: #fff;
        }
        .iconbtn_shoucang_sel {
          margin-right: 10px;
        }
        .rotate {
          font-size: 20px;
          display: inline-block;
          position: relative;
          z-index: 3;
          transform: rotate(-180deg);
        }
      }
      .company {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        .avatar {
          width: 58px;
          height: 58px;
          border-radius: 8px;
          overflow: hidden;
        }
        .name {
          color: #fff;
          font-size: 20px;
          /deep/ .van-sticky--fixed {
            left: 40px;
          }
          .desc {
            margin-top: 6px;
            span {
              color: #fff;
              font-size: 12px;
              padding: 2px 8px;
              margin-right: 5px;
              border-radius: 5px;
              border: 1px solid #fff;
            }
          }
          p {
            font-weight: 700;
          }
        }
      }
      .rest {
        margin: 20px 0;
        display: flex;
        font-size: 12px;
        align-items: center;
        span {
          color: #fff;
          margin-right: 15px;
        }
        i {
          color: #fff;
          margin-right: 5px;
        }
      }
      .welfare {
        ul {
          height: 40px;
          .welfare-item {
            float: left;
            .item {
              display: flex;
              align-items: center;
              padding: 10px 15px;
              color: #fff;
              font-size: 12px;
              border-radius: 5px;
              border: 1px solid #fff;
              margin-right: 10px;
              i {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  // 公司地址
  .address {
    margin-left: 15px;
    margin-right: 15px;
    .site {
      span {
        font-size: 18px;
        color: #181a39;
      }
    }
    .addres {
      margin-top: 18px;
      .site {
        span {
          font-size: 18px;
          color: #181a39;
        }
      }
      .sites {
        span {
          font-size: 16px;
          margin-right: 5px;
          color: #181a39;
        }
      }
      /deep/.van-icon-arrow::before {
        font-size: 14px;
      }
    }
    // 公司地址列表
    .cityname {
      p {
        margin-top: 8px;
        font-size: 16px;
      }
      span {
        font-size: 12px;
        color: #b4b4bd;
      }
      .bar {
        width: 80px;
        height: 32px;
        margin: 20px 10px 0 22px;
        border: 1px solid #b4b4bd;
        padding: 0;
        /deep/.van-button::before {
          background-color: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
        }
        span {
          color: #5b5d75;
        }
      }
    }
    // 公司简历
    .resume {
      margin-top: 30px;
    }
    .screening {
      margin-top: 10px;
      .contEnes {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        span {
          font-size: 17px;
        }
      }
      .active {
        // display: none;
        display: -webkit-box;
        span {
          font-size: 17px;
        }
      }
      div:nth-child(2) {
        text-align: center;
        span {
          font-size: 14px;
          color: #545671;
          margin-right: 5px;
        }
        /deep/.van-icon-arrow-down::before {
          font-size: 14px;
        }
        /deep/.rotate-up {
          font-size: 14px;
          transform: rotate(180deg) !important;
        }
      }
    }
    // 工商信息
    .business {
      margin-bottom: 10px;
      .full {
        font-size: 16px;
        color: #ccc;
      }
      .Information {
        font-size: 14px;
        color: #545671;
      }
    }
    // 面试评价
    .comments {
      margin-top: 20px;
      .review {
        margin-left: 30px;
        font-size: 16px;
      }
      /deep/.van-popup--center {
        width: 320px;
        height: 455px;
        border-radius: 20px;
      }
      .dialog {
        position: relative;

        .mark {
          margin-top: 10px;
          font-size: 18px;
          line-height: 55px;
          font-weight: 500;
          text-align: center;
        }
        .job {
          display: flex;
          margin-bottom: 10px;
          .choice {
            width: 100px;
            margin-left: 30px;
            span {
              font-size: 16px;
            }
          }
          .interview {
            span {
              display: inline-block;
              width: 150px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 14px;
              color: #969799;
              padding-left: 80px;
            }
          }
        }
        .orientation {
          display: flex;
          justify-content: space-around;
          span {
            display: inline-block;
            width: 100px;
            border-radius: 10px;
          }
        }
        /deep/.van-field__control {
          height: 150px !important;
        }
      }
      .interviewer {
        font-size: 16px;
        color: #545671;
      }
      /deep/.van-field__body {
        background-color: #f5f5f5;
        border-radius: 10px;
      }
    }
    // 面试评价列表
    .commentslist {
      height: 120px;
      border-radius: 5px;
      background: #f7f7f7;
      margin-top: 18px;
      // 线
      .lint {
        width: 1px;
        height: 85px;
        background-color: #ccc;
        margin: 20px 30px 5px 10px;
        opacity: 0.3;
      }
      /deep/.van-icon-star::before {
        font-size: 16px;
      }
      .comment {
        padding: 10px;
        margin: 20px 0 0 -15px;
        .commentitem {
          width: 80px;
          height: 72px;
          .wd {
            font-size: 30px;
            margin-left: 10px;
            color: #00baff;
          }
          .minute {
            font-size: 16px;
          }
          .comme {
            margin-top: 10px;
            /deep/.van-rate__icon {
              width: 10px;
            }
            .star {
              font-size: 14px;
            }
          }
        }
      }
      .wage {
        margin: 20px 0 10px -14px;
        .starlist {
          .interviewer {
            font-size: 14px;
          }
        }
      }
      // 星星
      .satellite {
        margin: 20px 0 0 10px;
      }
    }
    // 用户评论模块
    .user {
      margin-top: 30px;
      .userName {
        position: relative;
        .usernames {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 16px;
          color: #545671;
        }
        .asteroid {
          position: absolute;
          top: 25px;
          left: 220px;
        }
      }
      .engineer {
        font-size: 16px;
        margin-top: 5px;
        color: #b4b4bd;
      }
      .caption {
        font-size: 14px;
        color: #b4b4bd;
        background: #f7f4f5;
        padding-top: -10px;
        border-radius: 10px;
      }
      .details {
        max-width: 300px;
        margin-top: 10px;
        span {
          font-size: 16px;
        }
      }
      .when {
        font-size: 14px;
        margin-top: 10px;
        color: #b4b4bd;
      }
    }
    .zoom {
      /deep/.van-tabs__wrap--scrollable .van-tabs__nav--complete {
        padding-right: 0;
        padding-left: 0;
      }
      margin-top: 10px;
      /deep/.van-tabs__line {
        display: none;
      }
      /deep/.van-tabs--line .van-tabs__wrap {
        height: 100px;
      }
      /deep/.van-tabs__wrap--scrollable .van-tab {
        width: 120px;
        height: 120px;
        margin: 0 4px;
      }
      .img {
        width: 120px;
        height: 80px;
        border-radius: 10px;
      }
    }
    .busine {
      margin-top: 20px;
    }
  }
  .terminalblock {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    height: 60px;
    background-color: #fff;
    .positi,
    .questions {
      width: 170px;
      height: 40px;
      margin-bottom: 5px;
      border-radius: 5px;
      border: 1px solid #000;
      margin-left: 8px;
      margin-top: 15px;
    }
    .questions {
      margin-left: 70px;
    }
    .positis {
      position: absolute;
      top: 10px;
      left: 120px;
      span {
        font-size: 14px;
      }
    }
    .question {
      position: absolute;
      top: 10px;
      right: 38px;
      span {
        font-size: 14px;
      }
    }
    /deep/.van-button::before {
      background-color: #fff;
    }
  }
  // 星星的公共样式(开始)
  /deep/.van-rate__icon {
    width: 10px;
  }
  /deep/.van-icon-star-o::before {
    font-size: 14px;
  }
  /deep/.van-icon-star::before {
    font-size: 14px;
    color: #f0d213;
  }
  // 星星的公共样式(结束)
  .blur {
    // filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    width: 100%;
    height: 100%;
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
  }
  .background {
    position: absolute;
    width: 100%;
    height: 245px;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .alignCenter {
    text-align: right;
    margin-right: 20px;
  }
}
</style>
